"use client";

import React from 'react';
import Image from 'next/image';

interface PageBackgroundProps {
  src: string;
  opacity?: number;
}

/**
 * A component to display a full-screen background image with advanced effects.
 * It features a blurred, scaled version of the image filling the entire viewport,
 * and a clear, aspect-ratio-preserved version centered on top.
 * An opacity layer is applied to ensure foreground content remains readable.
 * It uses next/image with the priority prop to ensure the background loads quickly.
 *
 * @param src The source URL of the background image.
 * @param opacity The desired opacity of the background image, from 0 to 1. Defaults to 0.3.
 */
export function PageBackground({ src, opacity = 0.3 }: PageBackgroundProps) {
  return (
    <div
      className="fixed inset-0 -z-50"
      style={{
        opacity,
      }}
    >
      {/* Blurred background layer that covers the entire viewport */}
      <Image
        src={src}
        alt="Blurred background"
        fill
        priority
        quality={75}
        className="object-cover filter blur-2xl scale-110"
      />
      {/* Main image layer, contained and centered */}
      <Image
        src={src}
        alt="Main background"
        fill
        priority
        quality={75}
        className="object-contain"
      />
    </div>
  );
} 